<template>
  <div>
    <v-breadcrumbs :items="items" divider=">"></v-breadcrumbs>
    <v-btn color="blue lighten-4" @click="create">新话题</v-btn>
    <v-data-table :headers="headers" :items="tableData"
        class="elevation-1" hide-actions >
        <template v-slot:items="list">
          <td style="font-size: 15px"><a :href="toUrl(list.item.id)" class="titlelink">{{ list.item.title }}</a></td>
          <td >{{ list.item.uname }}<br><span class="datetime">{{ list.item.createTime }}</span></td>
          <td >{{ list.item.viewCount }}/{{ list.item.replyCount }}</td>
          <td >{{ list.item.lastUname}}<br><span class="datetime">{{ list.item.updateTime }}</span></td>
        </template>
    </v-data-table>
    <v-pagination v-model="page" :length="total" :total-visible="7" color="blue lighten-4" @input="load"></v-pagination>
    
  </div>
</template>

<script>
import {restUrl} from '../config/config'
export default {
  data() {
    return {
      items: [
        {
          text: '首页',
          disabled: false,
          href: '/#/'
        },
        {
          text: '列表',
          disabled: true,
          href: '/#/forum/1'
        }
      ],
      headers:[
        {text: "主题",sortable: false}, 
        {text: "作者", sortable: false, width: "160px"},
        {text: "查看/回复", sortable: false,width: "120px"},
        {text: "最后发表", sortable: false,width: "160px"}
      ],
      tableData: [],
      total: 1,
      page: 1
    }
  },
  methods: {
    toUrl: function(id) {
      return '/#/topic/'+id
    },
    create: function() {
      this.$router.push('/post/' + this.$route.params.fid);
    },
    load: function() {
      this.axios.get(restUrl + '/topic/list?category=' + this.$route.params.fid + '&pageIndex=' + this.page)
      .then(resp => {
        this.tableData = resp.data.data
        this.total = resp.data.total
      })
    }
  },
  created() {
    this.load()
  }
}
</script>

<style scoped>
  .datetime {
    font-size: 10px;
    color: #999;
  }
  .titlelink {
    color: #333;
    text-decoration: none;
  }
  a:hover {
    text-decoration: underline;
  }
</style>
